<template>
  <div class="pad-20 bgc-default">
    <div class="pad-l-20 pad-t-20 pad-b-24 pad-r-20 bg-color-white flex" style="overflow: auto;">
      <div v-for="(app, index) in appList" :key="index" class="mini-item" :class="{'mini-active': activeIndex === index}" @click="miniItemClick(index)">
        <div class="v-align-c item-head">
          <img class="width-72 hieght-64 mar-t--1 mar-l--2" :src="activeIndex === index ? minilinkActive :minilink" alt="">
          <div class="item-title">{{dict.appType[app.appType]||''}}</div>
        </div>
        <div class="mar-t-25 v-align-c mini-row">
          <img :src="app.appQrcodeUrl" class="et-logo" alt="">
          <div class="block flex-item">
            <div>
              <span class="font-20">{{app.appName}}</span>
              <el-button class="mar-l-12" type="text" size="mini" @click="authWechat">重新授权</el-button>
            </div>
            <div class="font-14 mar-t-20">
              <label>小程序ID：</label>
              <span>{{app.appId}}</span>
            </div>
            <div class="font-14">
              <label>认证状态：</label>
              <span>{{app.authStatus == 0 ? '未认证' : '已认证'}}</span>
            </div>
            <div class="font-14">
              <label>当前版本：</label>
              <span>v{{app.currentVersion}}.{{('000'+app.minorVersion).substr((app.minorVersion+'').length)}} (于{{app.versionTime}}创建版本）</span>
            </div>
          </div>
        </div>
        <div class="item-foot">
          <div class="flex flex-between">
            <div>
              <label>服务范围：</label>
              <span>{{app.appCategory}}</span>
            </div>
            <el-button type="text" size="mini" @click="getAuthorizerInfo">重新检测</el-button>
          </div>
          <div class="flex flex-between mar-t-10">
            <div>
              <label>最新版本：</label>
              <span>v{{app.nextVersion}}</span>
            </div>
            <!-- 审核被拒绝或者有新版本时，才可以更新 -->
            <el-button type="text" size="mini" @click="commit" v-if="(app.currentVersion*1<app.nextVersion*1) && (app.auditStatus==1||app.auditStatus==5)">立即更新</el-button>
          </div>
          <div class="flex flex-between mar-t-10">
            <div>
              <label>小程序路径：</label>
              <span>/pages/home/index</span>
            </div>
            <el-button type="text" size="mini" @click="doCopy('/pages/home/index', $event)">复制</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="mar-t-20 bg-color-white pad-l-20 pad-r-20">
      <div class="tabs-box tab-style-default">
        <el-tabs v-model="activeName">
          <el-tab-pane label="版本管理" name="0">
            <div v-if="app" class="flex">
              <div v-if="app.auditStatus != 4" class="bgc-default current-version flex flex-between">
                <div class="cur-left">
                  <h2>微信审核版本  v{{app.auditVersion}}</h2>
                  <div class="border"></div>
                  <div class="font-14 font-color-6 mar-t-27">于{{app.auditTime}}提交</div>
                  <div class="mar-t-22 color-default font-14">
                    {{app.status}} {{app.detail||''}}
                  </div>
                  <el-button v-if="app.status == '审核成功'" type="primary" class="release-btn" @click="release">确认发布</el-button>
                </div>
                <div class="align-c cur-right" v-if="app.previewImage">
                  <div class="qr-cord-box"><img :src="app.previewImage" width="160" alt=""></div>
                  <el-button type="text">下载二维码</el-button>
                  <div v-if="false">还没添加体验者?<el-button type="text" size="mini" class="add-btn">点击添加</el-button></div>
                </div>
              </div>
              <div v-else class="bgc-default current-version flex flex-between new-version">
                <div class="cur-left">
                  <h2>微信审核版本 </h2>
                  <div class="border"></div>
                  <div class="mar-t-22 color-default font-18">-暂无审核版本或版本已发布上线-</div>
                </div>
              </div>
              <div class="bgc-default current-version flex flex-between mar-l-20 new-version">
                <div class="cur-left">
                  <h2>系统最新版本  v{{app.nextVersion}}</h2>
                  <div class="border"></div>
                  <div class="font-14 font-color-6 mar-t-27">于{{app.versionTime}}提交</div>
                  <!-- 审核被拒绝(1)或者有新版本(5)时，才可以更新 -->
                  <div v-if="(app.currentVersion < app.nextVersion) && (app.auditStatus==1||app.auditStatus==5)">
                    <div class="mar-t-22 color-default font-14">当前系统已有新的版本，可点击下方按钮，上传最新版本代码至微信官方审核。通过后在小程序上正常使用。</div>
                    <el-button type="primary" class="release-btn" @click="commit">立即更新</el-button>
                  </div>
                  <div class="mar-t-22 color-default font-14" v-else>暂无版本需要更新</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="体验者权限" name="1">
            <div class="v-align-c">
              <el-button type="primary"@click="experiencerVisible = true">添加体验者</el-button>
              <div class="font-14 font-color-6 mar-l-14">体验者能够在“小程序-版本管理”中预览小程序体验版</div>
            </div>
            <div class="mar-t-20">
              <el-table :data="experiencerList" v-loading="listLoading"
                element-loading-text="加载中"
                style="width: 100%;"
                header-cell-class-name="default-header"
                row-class-name="default-row"
                >
                <el-table-column label="微信号" prop="userstr"></el-table-column>
                <el-table-column label="添加时间" prop="title"></el-table-column>
                <el-table-column width="140px" label="操作" align="right" fixed="right">
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" size="medium" @click="unbindTester(scope.row)">解绑</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="小程序客服" name="2">
            <div class="flex flex-between service">
              <div class="server-left">
                <h2>第一步  添加客服账号</h2>
                <div>1. 打开微信公众平台，登录当前店铺绑定的小程序账号；</div>
                <div>2. 从微信公众平台左侧菜单“功能 》客服”进入客服人员管理页面；</div>
                <div>3. 添加客服人员的微信号。</div>
                <el-button type="primary" class="btn" @click="goWechatKf">添加客服账号</el-button>
              </div>
              <div class="server-right">
                <img src="https://veekrayimg.joinsun.vip/upload/customer_service1.png" alt="">
              </div>
            </div>
            <div class="flex flex-between service mar-t-20">
              <div class="server-left">
                <h2>第二步  客服扫码登录</h2>
                <div>1. 客服人员打开微信公众平台网页版客服工具；</div>
                <div>2. 使用以上已添加的客服人员微信号扫码登录；</div>
                <el-button type="primary" class="btn" @click="goWechatKf">登录客服工具</el-button>
              </div>
              <div class="server-right">
                <img src="https://veekrayimg.joinsun.vip/upload/customer_service2.png" alt="">
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog title="添加体验者" :visible.sync="experiencerVisible" :close-on-press-escape="true" width="600px">
      <el-form label-width="100px">
        <el-form-item label="微信号" class="pad-10">
          <el-input placeholder="请输入微信号" v-model="wechatNo">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bindTester">确定</el-button>
        <el-button @click="experiencerVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.mini-item{
  color: #323233;
  background-color: white;
  width: 772px;
  height: 420px;
  margin-left: 20px;
  &:first-child{
    margin-left: 0px;
  }
  cursor: pointer;
  box-shadow: 0 0 8px 2px rgba(185, 185, 185, 0.32);
  .item-head{
    height: 62px;
    background-color: #ECF5FF;
    .item-title{
      color: #323233;
      font-size: 24px;
      margin-left: 12px;
    }
  }
  .mini-row{
    padding-left: 40px;
    margin-right: 30px;
    label{
      font-weight: unset;
    }
    .et-logo{
      width: 162px;
      height: 162px;
      border-radius: 50%;
      box-shadow: 0 0 8px 2px rgba(185, 185, 185, 0.32);
    }
    .block{
      margin-left: 43px;
      margin-right: 30px;
    }
  }
  .item-foot{
    padding: 0 60px;
    margin-top: 43px;
    label{
      font-weight: unset;
    }
  }
  .el-button{
    padding: unset;
  }
}
.color-default{
  color: #323233;
}
// 对tabs样式进行修改
.tabs-box{
  /deep/ .el-tabs{
    .el-tabs__header{
      margin: 0 0 20px;
    }
  }
  .current-version{
    padding: 40px;
    width: 821px;
    height: 310px;
    box-sizing: border-box;
    position: relative;
    .cur-left{
      width: 380px;
      height: 100%;
      h2{
        margin-top: 0;
        font-size: 24px;
        margin-bottom: 40px;
      }
      .border{
        width: 380px;
        height: 1px;
        background: #E5E5E5;
      }
      .mini-view{
        display: none;
        width: 100%;
        margin-top: 26px;
        .qr-cord-box{
          width: 162px;
          height: 162px;
          border: 1px solid #409EFF;
          border-radius: 10px;
        }
        .add-btn{
          text-decoration: underline;
        }
      }
      .release-btn{
        position: absolute;
        left: 103px;
        bottom: 40px;
      }
    }
    .cur-right{
      width: 200px;
      display: block;
      .qr-cord-box{
        width: 162px;
        height: 162px;
        border: 1px solid #409EFF;
        border-radius: 10px;
      }
      .add-btn{
        text-decoration: underline;
      }
    }
  }
  .new-version{
    .cur-left{
      width: 474px;
      h2{
        color: #409EFF;
      }
    }
  }
  .service{
    padding: 20px 38px 46px 20px;
    height: 480px;
    background-color: #FAFAFA;
    .server-left{
      font-size: 14px;
      color: #666;
      height: 100%;
      h2{
        font-size: 24px;
        margin-top: 0;
        margin-bottom: 40px;
      }
      .btn{
        margin-top: 68px;
      }
    }
    .server-right{
      img{
        width: 552px;
        height: 414px;
      }
    }
  }
}
.mini-active{
  background-color: #F8FBFF;
  border: 1px solid #409EFF;
  .item-head{
    background-color: #409EFF;
    .item-title{
      color: white;
    }
  }
}
@media screen and (max-width: 1280px){
  .mini-item{
    width: 515px;
    .mini-row{
      padding-left: 30px;
      .et-logo{
        width: 126px;
        height: 126px;
      }
    }
  }
  .tabs-box{
    .current-version{
      height: 580px;
      .cur-left{
        .mini-view{
          display: flex;
        }
        .release-btn{
          left: 103px;
          bottom: 40px;
        }
      }
      .cur-right{
        display: none;
      }
    }
    .new-version{
      .cur-left{
        .release-btn{
          position: relative;
          left: unset;
          bottom: unset;
          margin-left: 64px;
          margin-top: 28px;
        }
      }
    }
  }
}
</style>

<script>
  import { listWechatConf, getAuthorizerInfo, checkAccessToken, commit, previewQrCode, getLatestAuditStatus, release, getExperiencer, bindTester, unbindTester } from '@/api/system/wechat'
  import { getDictByGroupName } from '@/api/common/common'
  import elDragDialog from '@/directive/el-dragDialog'
  import minilinkActive from '@/assets/images/minilink-active.png'
  import minilink from '@/assets/images/minilink.png'
  import clipboard from '@/utils/clipboard'

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        loading: '',
        activeIndex: 0,
        minilinkActive: minilinkActive,
        minilink: minilink,
        activeName: 0,
        listLoading: false,
        authCodeVisible: false,
        authCodeUrl: '',
        authUrl: '',
        appList: [],
        dict: {
          appType: {}
        },
        app: {},
        experiencerList: [],
        experiencerVisible: false,
        wechatNo: ''
      }
    },
    // 初始化页面
    created() {
      getDictByGroupName('WechatConfDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      this.init()
    },
    mounted() {
    },
    methods: {
      init() {
        listWechatConf(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.appList = response.data
          this.appList.sort((a, b) => {
            return a.appType - b.appType
          })
          this.miniItemClick(0)
        })
      },
      miniItemClick(index) {
        // 上面大的tab切换事件
        this.activeIndex = index
        this.app = this.appList[index]
        if (!this.app) {
          return
        }
        checkAccessToken(this.app.appId).then(response => {
          if (response.data === 1) {
            this.previewQrCode()
            this.getLatestAuditStatus()
            this.getExperiencer()
          } else {
            this.$confirm('授权超时！请重新授权', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              location.href = this.app.authUrl
            }).catch(() => {
              this.$message.error('小程序未授权')
            })
          }
        })
      },
      authWechat() {
        location.href = this.app.authUrl
      },
      doCopy(text, event) {
        clipboard(text, event)
      },
      getAuthorizerInfo() {
        getAuthorizerInfo(this.app.appId).then(response => {
          if (response.isError) return
          if (!response.data.authorizer_info) return
          this.app.appName = response.data.authorizer_info.nick_name
          this.app.appLogo = response.data.authorizer_info.head_img
          this.app.authStatus = response.data.authorizer_info.verify_type_info.id === 0 ? '1' : '0'
          const categoryList = []
          response.data.authorizer_info.MiniProgramInfo.categories.forEach((item) => categoryList.push(item.first + '/' + item.second + '/'))
          this.$set(this.app, 'appCategory', categoryList.join(''))
        })
      },
      commit() {
        this.loading = this.$loading({
          lock: true,
          text: '正在更新，请耐心等待……',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.5)'
        })
        commit(this.app.appId).then(response => {
          this.loading.close()
          if (response.isError) return
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.init()
        })
      },
      getLatestAuditStatus() {
        getLatestAuditStatus(this.app.appId).then(response => {
          if (response.isError) return
          const status = response.data.status * 1
          switch (status) {
            default:
              this.$set(this.app, 'status', '暂无审核版本或者版本已发布上线')
              break
            case 0:
              this.$set(this.app, 'status', '审核成功')
              this.$set(this.app, 'detail', '审核通过，点击下方按钮后将更新至您小程序上。')
              break
            case 1:
              this.$set(this.app, 'status', '审核被拒绝')
              this.$set(this.app, 'detail', response.data.reason)
              break
            case 2:
              this.$set(this.app, 'status', '审核中')
              this.$set(this.app, 'detail', '微信审核中，请耐心等待。一般审核周期为1-7个工作日。')
              break
          }
        })
      },
      previewQrCode() {
        previewQrCode(this.app.appId).then(response => {
          if (response.isError) return
          this.$set(this.app, 'previewImage', 'data:image/png;base64,' + response.data)
        })
      },
      goWechatKf() {
        window.open('https://mpkf.weixin.qq.com/', '_blank')
      },
      release() {
        release(this.app.appId).then(response => {
          if (response.isError) return
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.init()
        })
      },
      getExperiencer() {
        getExperiencer(this.app.appId).then(response => {
          if (response.isError) return
          this.experiencerList = response.data.members
        })
      },
      bindTester() {
        if (!this.wechatNo) {
          this.$message.error('请先输入微信号')
          return
        }
        bindTester(this.app.appId, this.wechatNo).then(response => {
          if (response.isError) return
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.experiencerVisible = false
          this.getExperiencer(this.app.appId)
        })
      },
      unbindTester(row) {
        this.$confirm('解绑后该用户无法再体验小程序，确定解除绑定？', '解绑体验者', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          unbindTester(this.app.appId, this.wechatNo).then(response => {
            if (response.isError) return
            this.$message({
              message: '成功',
              type: 'success'
            })
            this.experiencerVisible = false
            this.getExperiencer(this.app.appId)
          })
        }).catch(() => {
        })
      }
    }
  }
</script>
